<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查询</title>
<!----导入bootstrap的外部css文件---->
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap.css"
	rel="stylesheet">
<link href="${basePath}bootstrap-3.3.7-dist/css/style.css"
	rel="stylesheet">
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" />
<!----导入bootstrap的依赖的jquery文件---->
<script src="${basePath}bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<!----导入bootstrap的外部javascript文件---->
<script src="${basePath}bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
	function checkMe() {
		var isOk = true;
		var name = $("#username").val();
		if (name == "" || name == null) {
			// 验证不通过，提示错误信息
			document.getElementById("error").innerHTML = "*请输入用户名";
			// 验证不通过，修改验证结果的变量，不允许提交表单
			isOK = false;
		} else {
			document.getElementById("error").innerHTML = "";
		}
		return isOk;
	}
</script>
<script type="text/javascript">
	// 页面打开时默认加载的ajax处理
	$(function() {
		doQuery();
	});
	// ajax异步查询处理
	function doQuery() {
		$.ajax({
			type : "POST", // http 请求类型：get/Post
			dataType:"json", // 指定从ajax引擎获取的服务器内容字符串的对象类型
			url : "${basePath}AdminInfoAjaxQueryServlet", // ajax请求的服务器端的C层对象（请求的servlet对象，写法和 form表单的 action属性内容一样）
			data : $('#form_admininfo_query').serialize(), // 发送ajax请求时，发送给服务器端的数据内容
			// ajax引擎完成服务器端交互成功完成之后的回调处理
			// data 参数是ajax引擎从服务器获取到的数据对象
			success : function(data) {
				// ajax请求成功之后的回调处理
				// 遍历json对象内容，进行前台显示
				// 格式化的结果内容
				var strShow = "";
				// 使用each方法遍历每个json对象中的元素
				// index 类似于for循环的下标；eachVal当前遍历的元素的对象
				$(data).each(function(index, eachVal) {
					strShow +="<tr>";
					strShow +="<th>";
					//strShow +=eachVal.adminId;
					strShow +=index+1;
					strShow +="</th>";
					strShow +="<th>";
					strShow +=data[index].adminName;
					strShow +="</th>";
					strShow +="<th>";
					strShow +=eachVal.adminMail;
					strShow +="</th>";
					strShow +="<th>";
					strShow +=eachVal.adminTel;
					strShow +="</th>";
					strShow +="<th>";
					strShow +=eachVal.adminBrithday;
					strShow +="</th>";					
					strShow +="</tr>";
				
				});
				// 将需要显示内容放入其所需要显示的控件中
				$('#tb_query_data').html(strShow);
				//console.info();
				//alert("Data Saved: " + data);
			},
			// ajax引擎完成服务器端交互失败的处理
			error : function() {
				alert("ajax查询admin info 失败");
			}
		});
	}
</script>
<style>
#a {
	margin: 80px auto;
}

#container {
	/*相对于body，主体框架居中*/
	margin: 100px auto;
	width: 1000px;
}
</style>

</head>
<body>
	<form id="form_admininfo_query" class="form-horizontal">
		<div class="form-group" id="a">
			<div class="col-sm-offset-3 col-sm-5">
				<input type="text" class="form-control" id="adminName"
					name="adminName" placeholder="用户名">
			</div>
			<div class="col-sm-1">
				<button type="button" class="btn btn-default"
					onclick="doQuery();">查询</button>
			</div>
			<div class="col-sm-3" id="error" style="color: #F00"></div>
		</div>

		<div class="bs-example" id="container" data-example-id="hoverable-table">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>邮箱</th>
							<th>电话</th>
							<th>出生日期</th>							
						</tr>
					</thead>
					<tbody id="tb_query_data">
						<!-- 这需要现实的内容由ajax的回调方法提供 -->
					</tbody>
				</table>
			</div>
	</form>
</body>
</html>